<template>
  <div class="playTheDetails">
    <div
      class="player"
      :style="{ 'background-image': 'url(' + playerList.al.picUrl + ')' }"
    >
      <div class="bgs"></div>
      <div class="playTop">
        <div class="left" @click="backhome">
          <i class="iconfont icon-yyiconarrowdownbold"></i>
        </div>
        <div class="playData">
          <span class="name">{{ playerList.name }}</span>
          <p>{{ playerList.ar[0].name }}</p>
        </div>
        <div class="right">
          <i class="iconfont icon-fenxiang"></i>
        </div>
      </div>
      <div
        class="playConten"
        v-show="!lyricListShow"
        @click.stop="lyricListShow = true"
      >
        <!-- 1.图片 -->
        <img
          src="@/assets/img/needle-ab.png"
          alt=""
          class="needle"
          :class="{ needle_active: isbntShow }"
        />
        <img src="@/assets/img/changpian.png" alt="" class="changpian" />
        <img
          :src="playerList.al.picUrl"
          alt=""
          class="al"
          :class="{ play: isbntShow, pause: !isbntShow }"
        />
      </div>
      <!-- 2.歌词 -->
      <div
        class="musiclyric"
        ref="musiclyric"
        v-show="lyricListShow"
        @click.stop="lyricListShow = false"
      >
        <p
          v-for="(item, index) in lyric"
          :key="index"
          :class="{
            pactive:
              Tcurrenttime * 1000 >= item.time &&
              Tcurrenttime * 1000 < item.pre,
          }"
        >
          {{ item.lrc }}
        </p>
      </div>
      <!-- 进度条 -->
      <div c></div>
      <div class="range">
        <div class="bar">
          <van-slider
            v-model="value"
            @drag-start="dragStart"
            @input="inputing"
            step="0.05"
            :min="0"
            :max="duration"
            active-color="#ee0a24"
            bar-height="3px"
          >
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
          <div class="timeLeft">{{ Tcurrenttime | playerTime }}</div>
          <div class="timeRight">{{ duration | playerTime }}</div>
        </div>
      </div>

      <div class="playFooter">
        <div class="footerTop"></div>
        <div class="footer">
          <div class="botype">
            <i
              class="iconfont icon-3"
              v-show="playerType == 1"
              @click="changePlayerType"
            ></i>
            <i
              class="iconfont icon-suijixunhuan"
              v-show="playerType == 2"
              @click="changePlayerType"
            ></i>
          </div>
          <div class="shangyis">
            <i class="iconfont icon-shangyishou" @click.stop="goPlay(-1)"></i>
          </div>
          <div class="pause pllay" @click="play">
            <i class="iconfont icon-bofang1" v-show="!isbntShow"></i>
            <i
              class="iconfont icon-tx-fill-zhengfangxing"
              v-show="isbntShow"
            ></i>
          </div>
          <div class="xiays">
            <i class="iconfont icon-shangxiayishou" @click.stop="goPlay(1)"></i>
          </div>
          <div class="xiays">
            <i class="iconfont icon-aixin"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
export default {
  props: [
    "playerList",
    "play",
    "isbntShow",
    "addDuration",
    "palyisShow",
    "xiugaitime",
  ],
  data() {
    return {
      lyricListShow: false,
      value: 0,
      playerType: 1, //1是列表播放,2是随机播放
    };
  },
  // 过滤器
  filters: {
    playerTime(data) {
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + (s < 10 ? "0" + s : s);
      }
    },
  },
  methods: {
    ...mapMutations([
      "updatedPalyShow",
      "updatePlayerrListIndex",
      "updatedDuration",
      "updatedTheCurrentTime",
    ]),
    //退出大播放器
    backhome() {
      this.lyricListShow = false;
      // this.updatedPalyShow();
      this.palyisShow();
    },
    //   上一首or下一首
    goPlay(val) {
      let index = this.playerListIndex + val;
      if (index < 0) {
        index = this.player.length - 1;
      } else if (index == this.player.length) {
        index = 0;
      }
      this.updatePlayerrListIndex(index);
    },
    //播放类型
    changePlayerType() {
      this.playerType = this.playerType == 1 ? 2 : 1;
    },
    //滑动
    dragStart() {},
    //进度变化
    inputing() {
      // console.log(this.value);
      // this.updatedTheCurrentTime(this.value)
      this.xiugaitime(this.value);
    },
  },
  computed: {
    ...mapState([
      "lyricList",
      "Tcurrenttime",
      "player",
      "playerListIndex",
      "duration",
    ]),
    //歌词处理
    lyric() {
      let arr;
      if (this.lyricList.lyric) {
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item, index) => {
          let min = item.slice(1, 3);
          let sec = item.slice(4, 6);
          let mill = item.slice(7, 10);
          let lrc = item.slice(11, item.length);
          let time =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9);
            lrc = item.slice(10, item.length);
            time =
              parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          }
          return { min, sec, mill, lrc, time };
        });
        //下一首歌的时间
        arr.forEach((item, index) => {
          if (index == arr.length - 1 || isNaN(arr[index + 1].time)) {
            item.pre = 0;
          } else {
            item.pre = arr[index + 1].time;
          }
        });
      }

      return arr;
    },
  },
  watch: {
    Tcurrenttime(newvalue) {
      this.value = newvalue;
      let p = document.querySelector("p.pactive");
      if (p) {
        if (p.offsetTop > 250) {
          this.$refs.musiclyric.scrollTop = p.offsetTop - 250;
        }
      }
      if (newvalue == this.duration) {

        // 监听播放类型
        if (this.playerType == 2) {
          // 随机数
          let index = parseInt(Math.random() * this.player.length);
          this.updatePlayerrListIndex(index);
        } else if (this.playerType == 1) {
          this.updatePlayerrListIndex(this.playerListIndex + 1);
          this.value=0
        }
        //到最后一首跳回第一首
        if (this.playerListIndex == this.player.length - 1) {
          this.updatePlayerrListIndex(0);
          this.play();
        } else {
          this.updatePlayerrListIndex(this.playerListIndex + 1);
        }
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.playTheDetails {
  .player {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: 600px;
    background-position: center center;
    .bgs {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: rgba(129, 124, 122, 0.9);
    }
  }
  //播放器 头部
  .playTop {
    display: flex;
    justify-content: space-between;
    padding: 5px 5px;
    align-items: center;
    height: 50px;
    .left {
      i {
        font-size: 24px;
        color: #fff;
      }
    }

    .right {
      i {
        font-size: 24px;
        color: #fff;
      }
    }
    .playData {
      color: #fff;
      text-align: center;
      line-height: 20px;
      overflow: hidden;
      .name {
        display: block;

        animation: roll 6s linear infinite;
      }

      p {
        font-size: 14px;
        color: #ccc;
      }
    }
  }
  //播放器中间
  .playConten {
    width: 100%;
    height: 450px;
    //   background-color: skyblue;
    .needle {
      width: 100px;
      height: 150px;
      position: absolute;
      margin-top: -5px;
      left: 46%;
      transform-origin: 0 0;
      transform: rotate(-15deg);
      transition: all 2s;
    }
    .needle_active {
      width: 100px;
      height: 150px;
      position: absolute;
      margin-top: -5px;
      left: 46%;
      transform-origin: 0 0;
      transform: rotate(0deg);
      transition: all 2s;
    }
    .changpian {
      width: 250px;
      height: 250px;
      position: absolute;
      left: 18%;
      top: 130px;
      z-index: -1;
    }
    .al {
      width: 155px;
      position: absolute;
      border-radius: 50%;
      top: 180px;
      left: 31%;
      animation: rotate 10s linear infinite;
      &.play {
        animation-play-state: running;
      }

      &.pause {
        animation-play-state: paused;
      }
    }
  }
  //歌词样式
  .musiclyric {
    display: flex;
    align-items: center;
    text-align: center;
    height: 400px;
    flex-direction: column;
    margin-top: 30px;
    overflow: scroll;
    p {
      color: #cbcccc;
      padding-bottom: 10px;
      &.pactive {
        color: #fff;
        font-size: 20px;
      }
    }
  }
  //进度条样式
  .range {
    text-align: center;
    position: absolute;
    left: 0px;
    width: 100%;
    bottom: 120px;
    .bar {
      width: 66%;
      margin: 0 auto;
      position: relative;
      font-size: 12px;
      color: #fff;
      .custom-button {
        width: 15px;
        height: 15px;
        border: 4px solid #fff;
        background-color: #d4453a;
        border-radius: 50%;
      }
      .timeLeft {
        position: absolute;
        left: -42px;
        top: -5px;
      }

      .timeRight {
        position: absolute;
        right: -42px;
        top: -5px;
      }
    }
  }
  //底部按钮样式
  .playFooter {
    width: 100%;
    position: absolute;

    bottom: 50px;
    .footer {
      display: flex;
      justify-content: space-between;
      i {
        font-size: 26px;
        color: #fff;
      }
      div {
        flex: 0 0 80px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .pause {
        .icon-bofang1 {
          margin-left: 5px;
        }
        .icon-tx-fill-zhengfangxing {
          font-size: 22px;
       margin-top: 3px;

        }

        &.pllay {
          height: 36px;
          flex: 0 0 36px;
          border: 2px solid #fff;
          border-radius: 50%;
          font-size: 17px;
          text-align: center;
          line-height: 36px;
          margin: 0px 10px;
        }
      }
    }
  }

  @keyframes rotate {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes roll {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(-100%);
    }
  }
}
</style>